<template>
  <div>
    <div>
      <h4>白天排尿次数</h4>
      <el-row>
        <el-col>
          <span>从早晨起床到晚上入睡的时间内，小便的次数是多少？</span>
          <el-select v-model="pgForm.oabss_value1" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>频率/次数</span>
        </el-col>
        <el-col>
          <span>从早晨起床到晚上入睡的时间内，小便的次数是多少？</span>
          <el-select v-model="pgForm.oabss_value2" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>得分</span>
        </el-col>
      </el-row>
      <h4>夜间排尿次数</h4>
      <el-row>
        <el-col>
          <span>从晚上入睡到早晨起床的时间内，因为小便起床的次数是多少？</span>
          <el-select v-model="pgForm.oabss_value3" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>频率/次数</span>
        </el-col>
        <el-col>
          <span>从晚上入睡到早晨起床的时间内，因为小便起床的次数是多少？</span>
          <el-select v-model="pgForm.oabss_value4" placeholder="请选择">
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>得分</span>
        </el-col>
      </el-row>
      <h4>尿急</h4>
      <el-row>
        <el-col>
          <span>是否有突然想要小便，同时难以忍受的现象发生？</span>
          <el-select v-model="pgForm.oabss_value5" placeholder="请选择">
            <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>频率/次数</span>
        </el-col>
        <el-col>
          <span>是否有突然想要小便，同时难以忍受的现象发生？</span>
          <el-select v-model="pgForm.oabss_value6" placeholder="请选择">
            <el-option
              v-for="item in options6"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>得分</span>
        </el-col>
      </el-row>
      <h4>急迫性尿失禁</h4>
      <el-row>
        <el-col>
          <span>是否有突然想要小便，同时无法忍受并出现尿失禁的现象？</span>
          <el-select v-model="pgForm.oabss_value7" placeholder="请选择">
            <el-option
              v-for="item in options7"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>频率/次数</span>
        </el-col>
        <el-col>
          <span>是否有突然想要小便，同时无法忍受并出现尿失禁的现象？</span>
          <el-select v-model="pgForm.oabss_value8" placeholder="请选择">
            <el-option
              v-for="item in options8"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>得分</span>
        </el-col>
      </el-row>
      <h4>评估总得分</h4>
      <el-row>
        <el-col>
          <span>总得分 </span>
          <el-input v-model="pgForm.oabss_input" placeholder="" style="width: 10%"></el-input>
          <span> 分</span>
        </el-col>
      </el-row>
      <h4>OAB评估</h4>
      <el-row>
        <el-col>
          <span>OAB</span>
          <el-select v-model="pgForm.oabss_value9" placeholder="">
            <el-option
              v-for="item in options9"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <h4>OABSS对OAB严重程度的定量标准：3≤得分≤5→轻度0AB;6≤得分≤11→中度0AB;得分≥12→重度0AB</h4>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "oabss",
  title: "膀胱过度活动症评分（OABSS）问卷表",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props: {
    fromdata:{},
    istrans:false,
  },
  data(){
    return {
      pgForm: {
        oabss_input: '',

        oabss_value1: '',
        oabss_value2: '',
        oabss_value3: '',
        oabss_value4: '',
        oabss_value5: '',
        oabss_value6: '',
        oabss_value7: '',
        oabss_value8: '',
        oabss_value9: '',
      },
      options1: [{
        value: '≤7',
        label: '≤7'
      }, {
        value: '8-14',
        label: '8-14'
      }, {
        value: '≥15',
        label: '≥15'
      }],

      options2: [{
        value: '0',
        label: '0'
      }, {
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }],

      options3: [{
        value: '0',
        label: '0'
      }, {
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }, {
        value: '≥3',
        label: '≥3'
      }],

      options4: [{
        value: '0',
        label: '0'
      }, {
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }, {
        value: '3',
        label: '3'
      }],

      options5: [{
        value: '无',
        label: '无'
      }, {
        value: '每周<1',
        label: '每周<1'
      }, {
        value: '每周≥1',
        label: '每周≥1'
      }, {
        value: '每日=1',
        label: '每日=1'
      }, {
        value: '每日2-4',
        label: '每日2-4'
      }, {
        value: '每日≥5',
        label: '每日≥5'
      }],

      options6: [{
        value: '0',
        label: '0'
      }, {
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }, {
        value: '3',
        label: '3'
      }, {
        value: '4',
        label: '4'
      }, {
        value: '5',
        label: '5'
      }],

      options7: [{
        value: '无',
        label: '无'
      }, {
        value: '每周<1',
        label: '每周<1'
      }, {
        value: '每周≥1',
        label: '每周≥1'
      }, {
        value: '每日=1',
        label: '每日=1'
      }, {
        value: '每日2-4',
        label: '每日2-4'
      }, {
        value: '每日≥5',
        label: '每日≥5'
      }],

      options8: [{
        value: '0',
        label: '0'
      }, {
        value: '1',
        label: '1'
      }, {
        value: '2',
        label: '2'
      }, {
        value: '3',
        label: '3'
      }, {
        value: '4',
        label: '4'
      }, {
        value: '5',
        label: '5'
      }],
      options9: [{
        value: '轻度OAB',
        label: '轻度OAB'
      }, {
        value: '中度OAB',
        label: '中度OAB'
      }, {
        value: '重度OAB',
        label: '重度OAB'
      }],
    }
  },
  computed:{
    sum:{
      get(){
        return (this.pgForm.oabss_value2)*1+(this.pgForm.oabss_value4)*1+(this.pgForm.oabss_value6)*1+(this.pgForm.oabss_value8)*1
      },
      set(val){}
    },

  },
  watch: {
    sum(val){
      this.pgForm.oabss_input = val
    },
    'pgForm.oabss_input':{
      deep:true,
      handler(val){
        if(val<3) this.pgForm.oabss_value9 = '低于最低评分标准'
        if(val>=3 & val<=5) this.pgForm.oabss_value9 = '轻度OAB'
        if(val>=6 & val<=11) this.pgForm.oabss_value9 = '中度OAB'
        if(val>=12) this.pgForm.oabss_value9 = '重度OAB'
      }
    }
  },
}
</script>

<style scoped>

.el-select{
  margin: 0 10px;
}
.el-row {
  margin: 10px 0;
  padding: 20px 10px;
  background-color: #f9f9f9;
}

</style>
